<template>
  <div>
    <Page auto-content-height>
      <!-- 表格 -->
      <Grid :border="true">
        <!-- 表格操作 -->
        <template #action>
          <el-button :icon="Edit" link type="primary" @click="EditHandle" />
          <el-button :icon="Delete" link type="danger" />
        </template>
        <!-- 使用 toolbar-buttons 插槽添加自定义按钮 -->
        <template #toolbar-buttons>
          <div style="font-size: 16px">
            {{ $t('sys.role.roleList') }}
          </div>
          <el-button class="ml-auto" type="primary" @click="openhandle">
            {{ $t('sys.role.addRole') }}
          </el-button>
        </template>
      </Grid>
    </Page>

    <!-- 弹窗框 -->
    <Drawer class="w-[35%]" destroy-on-close="true" @ok-event="handle" />
  </div>
</template>

<script setup lang="tsx">
import type { RowType } from './type';

import type { VxeGridListeners } from '#/adapter/vxe-table';

import { Page, useVbenDrawer } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { Delete, Edit } from '@element-plus/icons-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getRoleList } from '#/api/sys/role';
import { useTable } from '#/hooks/usetable';

import ExtraDrawer from './components/drawer.vue';
// 弹窗连接
const [Drawer, drawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: ExtraDrawer,
});
// 接收子组件的数据
const handle = () => {
  // 接收到子组件的数据
  // console.log('父组件', val);
};
// 假设这是你的 getMenuList 函数
const getRoleListData = async (params: any) => {
  const { page = 1, pageSize = 5 } = params;
  const res: any = await getRoleList({ page, pageSize }); // 调用实际的 API 获取数据
  // i18处理

  const items = res.data.map((item: any) => {
    return {
      ...item,
      name: $t(`sys.${item.name}`),
    };
  });

  return {
    total: res.data.length,
    items,
  };
};
// 数据
const data = ref([
  {
    id: 1,
    name: '系统管理',
    type: '目录',
  },
  {
    id: 2,
    name: '用户管理',
    type: '目录',
  },

  {
    name: '角色管理',
    type: '目录',
  },
  {
    name: '菜单管理',
    type: '目录',
  },
  {
    name: '权限管理',
    type: '目录',
  },
  {
    name: '日志管理',
    type: '目录',
  },
  {
    name: '系统设置',
    type: '目录',
  },
  {
    name: '数据字典',
    type: '目录',
  },
]);

// 获取内部数据
// const getdataHandle = () => {
//   drawerApi.setState({ title: '修改' });
//   drawerApi.open();
// };

// 表格配置项
const { tableconfig } = useTable({
  data: data.value,
  columns: [
    {
      title: $t('sys.role.roleName'),
      field: 'name',
    },
    {
      title: $t('sys.role.roleValue'),
      field: 'code',
    },
    {
      title: $t('sys.role.status'),
      field: 'status',
    },
    {
      title: $t('sys.role.remark'),
      field: 'remark',
    },

    // 创建时间
    {
      title: $t('sys.role.createTime'),
      field: 'createdAt',
      formatter: ['formatDate', 'yyyy-MM-dd'],
    },
    // 操作
    {
      title: $t('sys.role.operation'),
      minWidth: 200,
      slots: { default: 'action' },
    },
  ],
  proxyConfig: {
    ajax: {
      query: async (page: any) => {
        const { currentPage, pageSize } = page.page;
        return await getRoleListData({ page: currentPage, pageSize });
      },
    },
  },
});
// 表格事件
const gridEvents: VxeGridListeners<RowType> = {};

// 编辑事件
const EditHandle = () => {
  drawerApi.setState({ title: $t('sys.role.addRole') });
  drawerApi.open();
};

// 打开弹窗
const openhandle = () => {
  drawerApi.setState({ title: $t('sys.role.editRole') });
  drawerApi.open();
};

// 表格实例
const [Grid] = useVbenVxeGrid({ gridEvents, gridOptions: tableconfig });
</script>
